<template>
  <el-dialog title="修改静态属性" :visible.sync="dialogVisible" width="46%">
    <!-- 表单区域 -->
    <el-form ref="formRef" :model="addForm" label-width="80px" :rules="formRules">
      <el-form-item label="原属性名">
        <el-input v-model="row.attr_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="现修改为" prop="attr_name">
        <el-input v-model="addForm.attr_name"></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data: function () {
    return {
      dialogVisible: false,
      // 接收父组件传递的行数据
      row: {},
      addForm: {
        attr_name: ''
      },
      // 表单校验规则
      formRules: {
        attr_name: [
          { required: true, message: '请输入参数名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 点击确认，修改静态属性
    confirm: function () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) {
          return
        }
        const res = await this.$http.put(`categories/${this.row.cat_id}/attributes/${this.row.attr_id}`, {
          attr_name: this.addForm.attr_name,
          attr_sel: 'only'
        }).catch(err => err)
        if (res.meta.status !== 200) {
          return this.$message.warning('修改属性失败')
        }
        this.$message.success('修改属性成功')
        this.$parent.$parent.getTableData()
        this.dialogVisible = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
